<style>
    #VIEW-icon-index .icon-body {
        text-align: center;
        padding-top: 35px;
        padding-bottom: 35px;
        cursor: pointer;
        transition: all 0.3s ease;
        overflow: hidden;
    }

    #VIEW-icon-index .icon-body:hover {
        background: #f9fbff;
        color: #5a8bff;
    }

    #VIEW-icon-index .icon-body:hover .copy {
        opacity: 1;
        transform: translateY(0px);
    }

    #VIEW-icon-index .icon-body .layui-icon {
        font-size: 30px;
    }

    #VIEW-icon-index .icon-body .copy {
        background: #fff;
        width: 100%;
        line-height: 30px;
        position: absolute;
        bottom: 0;
        left: 0;
        box-shadow: 0 0 20px #9db3e6;
        opacity: 0;
        user-select: none;
        transform: translateY(30px);
        transition: all 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    }
</style>
<div class="layui-fluid" id="VIEW-icon-index" lay-title="图标">
    <div class="layui-row layui-col-space10">
        <script type="text/html" template>
            {{# layui.each(icons,function(k,v){ }}
            <div class="layui-col-lg1">
                <div class="layui-card" title="{{k}}">
                    <div class="layui-card-body icon-body">
                        <span class="layui-icon layui-icon-{{k}}"></span>
                        <p class="layui-elip">{{k}}</p>
                        <p class="nepadmin-font-12">&amp;#x{{v}};</p>
                        <span class="copy nepadmin-font-12 layui-bg-blue"
                              data-clipboard-text="layui-icon-{{k}}">复制代码</span>
                    </div>
                </div>
            </div>
            {{# }) }}
        </script>
    </div>
</div>
<script>
    layui.use(['clipboard'], function (clipboard) {

        var copy = new clipboard('.copy');
        copy.on('success', function (e) {
            layer.msg('代码已复制到剪贴板', {icon: 1});
            e.clearSelection();
        });
        copy.on('error', function (e) {
            layer.msg('代码复制失败，请手动操作吧', {icon: 2});
        });

    })
    icons = {
        'check-circle': "\e77d",
        'CI': "\e77e",
        'Dollar': "\e77f",
        'compass': "\e780",
        'close-circle': "\e781",
        'frown': "\e782",
        'info-circle': "\e783",
        'left-circle': "\e784",
        'down-circle': "\e785",
        'EURO': "\e786",
        'copyright': "\e787",
        'minus-circle': "\e788",
        'meh': "\e789",
        'plus-circle': "\e78a",
        'play-circle': "\e78b",
        'question-circle': "\e78c",
        'Pound': "\e78d",
        'right-circle': "\e78e",
        'smile': "\e78f",
        'trademark': "\e790",
        'time-circle': "\e791",
        'timeout': "\e792",
        'earth': "\e793",
        'YUAN': "\e794",
        'up-circle': "\e795",
        'warning-circle': "\e796",
        'sync': "\e797",
        'transaction': "\e798",
        'undo': "\e799",
        'redo': "\e79a",
        'reload': "\e79b",
        'reloadtime': "\e79c",
        'message': "\e79d",
        'dashboard': "\e79e",
        'issuesclose': "\e79f",
        'poweroff': "\e7a0",
        'logout': "\e7a1",
        'login': "\e7a2",
        'piechart': "\e7a3",
        'setting': "\e7a4",
        'eye': "\e7a5",
        'location': "\e7a6",
        'edit-square': "\e7a7",
        'export': "\e7a8",
        'save': "\e7a9",
        'Import': "\e7aa",
        'appstore': "\e7ab",
        'close-square': "\e7ac",
        'down-square': "\e7ad",
        'layout': "\e7ae",
        'left-square': "\e7af",
        'play-square': "\e7b0",
        'control': "\e7b1",
        'codelibrary': "\e7b2",
        'detail': "\e7b3",
        'minus-square': "\e7b4",
        'plus-square': "\e7b5",
        'right-square': "\e7b6",
        'project': "\e7b7",
        'wallet': "\e7b8",
        'up-square': "\e7b9",
        'calculator': "\e7ba",
        'interation': "\e7bb",
        'check-square': "\e7bc",
        'border': "\e7bd",
        'border-outer': "\e7be",
        'border-top': "\e7bf",
        'border-bottom': "\e7c0",
        'border-left': "\e7c1",
        'border-right': "\e7c2",
        'border-inner': "\e7c3",
        'border-verticle': "\e7c4",
        'border-horizontal': "\e7c5",
        'radius-bottomleft': "\e7c6",
        'radius-bottomright': "\e7c7",
        'radius-upleft': "\e7c8",
        'radius-upright': "\e7c9",
        'radius-setting': "\e7ca",
        'adduser': "\e7cb",
        'deleteteam': "\e7cc",
        'deleteuser': "\e7cd",
        'addteam': "\e7ce",
        'user': "\e7cf",
        'team': "\e7d0",
        'areachart': "\e7d1",
        'linechart': "\e7d2",
        'barchart': "\e7d3",
        'pointmap': "\e7d4",
        'container': "\e7d5",
        'database': "\e7d6",
        'sever': "\e7d7",
        'mobile': "\e7d8",
        'tablet': "\e7d9",
        'redenvelope': "\e7da",
        'book': "\e7db",
        'filedone': "\e7dc",
        'reconciliation': "\e7dd",
        'file-exception': "\e7de",
        'filesync': "\e7df",
        'filesearch': "\e7e0",
        'solution': "\e7e1",
        'fileprotect': "\e7e2",
        'file-add': "\e7e3",
        'file-excel': "\e7e4",
        'file-exclamation': "\e7e5",
        'file-pdf': "\e7e6",
        'file-image': "\e7e7",
        'file-markdown': "\e7e8",
        'file-unknown': "\e7e9",
        'file-ppt': "\e7ea",
        'file-word': "\e7eb",
        'file': "\e7ec",
        'file-zip': "\e7ed",
        'file-text': "\e7ee",
        'file-copy': "\e7ef",
        'snippets': "\e7f0",
        'audit': "\e7f1",
        'diff': "\e7f2",
        'Batchfolding': "\e7f3",
        'securityscan': "\e7f4",
        'propertysafety': "\e7f5",
        'safetycertificate': "\e7f6",
        'insurance': "\e7f7",
        'alert': "\e7f8",
        'delete': "\e7f9",
        'hourglass': "\e7fa",
        'bulb': "\e7fb",
        'experiment': "\e7fc",
        'bell': "\e7fd",
        'trophy': "\e7fe",
        'rest': "\e7ff",
        'USB': "\e800",
        'skin': "\e801",
        'home': "\e802",
        'bank': "\e803",
        'filter': "\e804",
        'funnelplot': "\e805",
        'like': "\e806",
        'unlike': "\e807",
        'unlock': "\e808",
        'lock': "\e809",
        'customerservice': "\e80a",
        'flag': "\e80b",
        'moneycollect': "\e80c",
        'medicinebox': "\e80d",
        'shop': "\e80e",
        'rocket': "\e80f",
        'shopping': "\e810",
        'folder': "\e811",
        'folder-open': "\e812",
        'folder-add': "\e813",
        'deploymentunit': "\e814",
        'accountbook': "\e815",
        'contacts': "\e816",
        'carryout': "\e817",
        'calendar-check': "\e818",
        'calendar': "\e819",
        'scan': "\e81a",
        'select': "\e81b",
        'boxplot': "\e81c",
        'build': "\e81d",
        'sliders': "\e81e",
        'laptop': "\e81f",
        'barcode': "\e820",
        'camera': "\e821",
        'cluster': "\e822",
        'gateway': "\e823",
        'car': "\e824",
        'printer': "\e825",
        'read': "\e826",
        'cloud-server': "\e827",
        'cloud-upload': "\e828",
        'cloud': "\e829",
        'cloud-download': "\e82a",
        'cloud-sync': "\e82b",
        'video': "\e82c",
        'notification': "\e82d",
        'sound': "\e82e",
        'radarchart': "\e82f",
        'qrcode': "\e830",
        'fund': "\e831",
        'image': "\e832",
        'mail': "\e833",
        'table': "\e834",
        'idcard': "\e835",
        'creditcard': "\e836",
        'heart': "\e837",
        'block': "\e838",
        'error': "\e839",
        'star': "\e83a",
        'gold': "\e83b",
        'heatmap': "\e83c",
        'wifi': "\e83d",
        'attachment': "\e83e",
        'edit': "\e83f",
        'key': "\e840",
        'api': "\e841",
        'disconnect': "\e842",
        'highlight': "\e843",
        'monitor': "\e844",
        'link': "\e845",
        'man': "\e846",
        'percentage': "\e847",
        'search': "\e848",
        'pushpin': "\e849",
        'phone': "\e84a",
        'shake': "\e84b",
        'tag': "\e84c",
        'wrench': "\e84d",
        'woman': "\e84e",
        'tags': "\e84f",
        'scissor': "\e850",
        'mr': "\e851",
        'share': "\e852",
        'branches': "\e853",
        'fork': "\e854",
        'shrink': "\e855",
        'arrawsalt': "\e856",
        'verticalright': "\e857",
        'verticalleft': "\e858",
        'right': "\e859",
        'left': "\e85a",
        'up': "\e85b",
        'down': "\e85c",
        'fullscreen': "\e85d",
        'fullscreen-exit': "\e85e",
        'doubleleft': "\e85f",
        'doubleright': "\e860",
        'arrowright': "\e861",
        'arrowup': "\e862",
        'arrowleft': "\e863",
        'arrowdown': "\e864",
        'upload': "\e865",
        'colum-height': "\e866",
        'vertical-align-botto': "\e867",
        'vertical-align-middl': "\e868",
        'totop': "\e869",
        'vertical-align-top': "\e86a",
        'download': "\e86b",
        'sort-descending': "\e86c",
        'sort-ascending': "\e86d",
        'fall': "\e86e",
        'swap': "\e86f",
        'stock': "\e870",
        'rise': "\e871",
        'indent': "\e872",
        'outdent': "\e873",
        'menu': "\e874",
        'unorderedlist': "\e875",
        'orderedlist': "\e876",
        'align-right': "\e877",
        'align-center': "\e878",
        'align-left': "\e879",
        'pic-center': "\e87a",
        'pic-right': "\e87b",
        'pic-left': "\e87c",
        'bold': "\e87d",
        'font-colors': "\e87e",
        'exclaimination': "\e87f",
        'font-size': "\e880",
        'infomation': "\e881",
        'line-height': "\e882",
        'strikethrough': "\e883",
        'underline': "\e884",
        'number': "\e885",
        'italic': "\e886",
        'code': "\e887",
        'column-width': "\e888",
        'check': "\e889",
        'ellipsis': "\e88a",
        'dash': "\e88b",
        'close': "\e88c",
        'enter': "\e88d",
        'line': "\e88e",
        'minus': "\e88f",
        'question': "\e890",
        'plus': "\e891",
        'rollback': "\e892",
        'small-dash': "\e893",
        'pause': "\e894",
        'bg-colors': "\e895",
        'crown': "\e896",
        'drag': "\e897",
        'desktop': "\e898",
        'gift': "\e899",
        'stop': "\e89a",
        'fire': "\e89b",
        'thunderbolt': "\e89c",
        'check-circle-fill': "\e89d",
        'left-circle-fill': "\e89e",
        'down-circle-fill': "\e89f",
        'minus-circle-fill': "\e8a0",
        'close-circle-fill': "\e8a1",
        'info-circle-fill': "\e8a2",
        'up-circle-fill': "\e8a3",
        'right-circle-fill': "\e8a4",
        'plus-circle-fill': "\e8a5",
        'question-circle-fill': "\e8a6",
        'EURO-circle-fill': "\e8a7",
        'frown-fill': "\e8a8",
        'copyright-circle-fil': "\e8a9",
        'CI-circle-fill': "\e8aa",
        'compass-fill': "\e8ab",
        'Dollar-circle-fill': "\e8ac",
        'poweroff-circle-fill': "\e8ad",
        'meh-fill': "\e8ae",
        'play-circle-fill': "\e8af",
        'Pound-circle-fill': "\e8b0",
        'smile-fill': "\e8b1",
        'stop-fill': "\e8b2",
        'warning-circle-fill': "\e8b3",
        'time-circle-fill': "\e8b4",
        'trademark-circle-fil': "\e8b5",
        'YUAN-circle-fill': "\e8b6",
        'heart-fill': "\e8b7",
        'piechart-circle-fil': "\e8b8",
        'dashboard-fill': "\e8b9",
        'message-fill': "\e8ba",
        'check-square-fill': "\e8bb",
        'down-square-fill': "\e8bc",
        'minus-square-fill': "\e8bd",
        'close-square-fill': "\e8be",
        'codelibrary-fill': "\e8bf",
        'left-square-fill': "\e8c0",
        'play-square-fill': "\e8c1",
        'up-square-fill': "\e8c2",
        'right-square-fill': "\e8c3",
        'plus-square-fill': "\e8c4",
        'accountbook-fill': "\e8c5",
        'carryout-fill': "\e8c6",
        'calendar-fill': "\e8c7",
        'calculator-fill': "\e8c8",
        'interation-fill': "\e8c9",
        'project-fill': "\e8ca",
        'detail-fill': "\e8cb",
        'save-fill': "\e8cc",
        'wallet-fill': "\e8cd",
        'control-fill': "\e8ce",
        'layout-fill': "\e8cf",
        'appstore-fill': "\e8d0",
        'mobile-fill': "\e8d1",
        'tablet-fill': "\e8d2",
        'book-fill': "\e8d3",
        'redenvelope-fill': "\e8d4",
        'safetycertificate-f': "\e8d5",
        'propertysafety-fill': "\e8d6",
        'insurance-fill': "\e8d7",
        'securityscan-fill': "\e8d8",
        'file-exclamation-fil': "\e8d9",
        'file-add-fill': "\e8da",
        'file-fill': "\e8db",
        'file-excel-fill': "\e8dc",
        'file-markdown-fill': "\e8dd",
        'file-text-fill': "\e8de",
        'file-ppt-fill': "\e8df",
        'file-unknown-fill': "\e8e0",
        'file-word-fill': "\e8e1",
        'file-zip-fill': "\e8e2",
        'file-pdf-fill': "\e8e3",
        'file-image-fill': "\e8e4",
        'diff-fill': "\e8e5",
        'file-copy-fill': "\e8e6",
        'snippets-fill': "\e8e7",
        'batchfolding-fill': "\e8e8",
        'reconciliation-fill': "\e8e9",
        'folder-add-fill': "\e8ea",
        'folder-fill': "\e8eb",
        'folder-open-fill': "\e8ec",
        'database-fill': "\e8ed",
        'container-fill': "\e8ee",
        'sever-fill': "\e8ef",
        'calendar-check-fill': "\e8f0",
        'image-fill': "\e8f1",
        'idcard-fill': "\e8f2",
        'creditcard-fill': "\e8f3",
        'fund-fill': "\e8f4",
        'read-fill': "\e8f5",
        'contacts-fill': "\e8f6",
        'delete-fill': "\e8f7",
        'notification-fill': "\e8f8",
        'flag-fill': "\e8f9",
        'moneycollect-fill': "\e8fa",
        'medicinebox-fill': "\e8fb",
        'rest-fill': "\e8fc",
        'shopping-fill': "\e8fd",
        'skin-fill': "\e8fe",
        'video-fill': "\e8ff",
        'sound-fill': "\e900",
        'bulb-fill': "\e901",
        'bell-fill': "\e902",
        'filter-fill': "\e903",
        'fire-fill': "\e904",
        'funnelplot-fill': "\e905",
        'gift-fill': "\e906",
        'hourglass-fill': "\e907",
        'home-fill': "\e908",
        'trophy-fill': "\e909",
        'location-fill': "\e90a",
        'cloud-fill': "\e90b",
        'customerservice-fill': "\e90c",
        'experiment-fill': "\e90d",
        'eye-fill': "\e90e",
        'like-fill': "\e90f",
        'lock-fill': "\e910",
        'unlike-fill': "\e911",
        'star-fill': "\e912",
        'unlock-fill': "\e913",
        'alert-fill': "\e914",
        'api-fill': "\e915",
        'highlight-fill': "\e916",
        'phone-fill': "\e917",
        'edit-fill': "\e918",
        'pushpin-fill': "\e919",
        'rocket-fill': "\e91a",
        'thunderbolt-fill': "\e91b",
        'tag-fill': "\e91c",
        'wrench-fill': "\e91d",
        'tags-fill': "\e91e",
        'bank-fill': "\e91f",
        'camera-fill': "\e920",
        'error-fill': "\e921",
        'crown-fill': "\e922",
        'mail-fill': "\e923",
        'car-fill': "\e924",
        'printer-fill': "\e925",
        'shop-fill': "\e926",
        'setting-fill': "\e927",
        'USB-fill': "\e928",
        'golden-fill': "\e929",
        'build-fill': "\e92a",
        'boxplot-fill': "\e92b",
        'sliders-fill': "\e92c",
        'alibaba': "\e92d",
        'alibabacloud': "\e92e",
        'antdesign': "\e92f",
        'ant-cloud': "\e930",
        'behance': "\e931",
        'googleplus': "\e932",
        'medium': "\e933",
        'google': "\e934",
        'IE': "\e935",
        'amazon': "\e936",
        'slack': "\e937",
        'alipay': "\e938",
        'taobao': "\e939",
        'zhihu': "\e93a",
        'HTML': "\e93b",
        'linkedin': "\e93c",
        'yahoo': "\e93d",
        'facebook': "\e93e",
        'skype': "\e93f",
        'CodeSandbox': "\e940",
        'chrome': "\e941",
        'codepen': "\e942",
        'aliwangwang': "\e943",
        'apple': "\e944",
        'android': "\e945",
        'sketch': "\e946",
        'Gitlab': "\e947",
        'dribbble': "\e948",
        'instagram': "\e949",
        'reddit': "\e94a",
        'windows': "\e94b",
        'yuque': "\e94c",
        'Youtube': "\e94d",
        'Gitlab-fill': "\e94e",
        'dropbox': "\e94f",
        'dingtalk': "\e950",
        'android-fill': "\e951",
        'apple-fill': "\e952",
        'HTML-fill': "\e953",
        'windows-fill': "\e954",
        'QQ': "\e955",
        'twitter': "\e956",
        'skype-fill': "\e957",
        'weibo': "\e958",
        'yuque-fill': "\e959",
        'Youtube-fill': "\e95a",
        'yahoo-fill': "\e95b",
        'wechat-fill': "\e95c",
        'chrome-fill': "\e95d",
        'alipay-circle-fill': "\e95e",
        'aliwangwang-fill': "\e95f",
        'behance-circle-fill': "\e960",
        'amazon-circle-fill': "\e961",
        'codepen-circle-fill': "\e962",
        'CodeSandbox-circle-f': "\e963",
        'dropbox-circle-fill': "\e964",
        'github-fill': "\e965",
        'dribbble-circle-fill': "\e966",
        'googleplus-circle-f': "\e967",
        'medium-circle-fill': "\e968",
        'QQ-circle-fill': "\e969",
        'IE-circle-fill': "\e96a",
        'google-circle-fill': "\e96b",
        'dingtalk-circle-fill': "\e96c",
        'sketch-circle-fill': "\e96d",
        'slack-circle-fill': "\e96e",
        'twitter-circle-fill': "\e96f",
        'taobao-circle-fill': "\e970",
        'weibo-circle-fill': "\e971",
        'zhihu-circle-fill': "\e972",
        'reddit-circle-fill': "\e973",
        'alipay-square-fill': "\e974",
        'dingtalk-square-fill': "\e975",
        'CodeSandbox-square-f': "\e976",
        'behance-square-fill': "\e977",
        'amazon-square-fill': "\e978",
        'codepen-square-fill': "\e979",
        'dribbble-square-fill': "\e97a",
        'dropbox-square-fill': "\e97b",
        'facebook-fill': "\e97c",
        'googleplus-square-f': "\e97d",
        'google-square-fill': "\e97e",
        'instagram-fill': "\e97f",
        'IE-square-fill': "\e980",
        'medium-square-fill': "\e981",
        'linkedin-fill': "\e982",
        'QQ-square-fill': "\e983",
        'reddit-square-fill': "\e984",
        'twitter-square-fill': "\e985",
        'sketch-square-fill': "\e986",
        'slack-square-fill': "\e987",
        'taobao-square-fill': "\e988",
        'weibo-square-fill': "\e989",
        'zhihu-square-fill': "\e98a",
        'zoomout': "\e98b",
        'apartment': "\e98c",
        'audio': "\e98d",
        'audio-fill': "\e98e",
        'robot': "\e98f",
        'zoomin': "\e990"
    }

</script>